<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style type="text/css">
div{
	background: white;
	width:800px;
	margin: 0 auto; 
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
</head>
<script type="text/javascript">
	//使用ajax验证用户名
	$(function(){
		$(":input[name=name]").change(function(){
			var thisnode=$(this); //当前节点
			var username=$(this).val();
			//alert(username);
			username=$.trim(username);
			if(username!=""){
				thisnode.nextAll("font").remove();
				var url="check.action";
				var args={"name":username,"time":new Date()};
				$.post(url,args,function(data){
						if(data=="1"){
							thisnode.after("<br><font color='red'>用户名已存在!</font>");
						}
					}
				);
			}else{
				alert('用户名不能为空!');
				$(this).val("");
				$(this).focus();
			}
		});
		
	})
</script>
<body >

<div>
	<form action="add" method="post">
		<table border="1px" cellpadding="10" cellspacing="0px" >
		<caption>添加用户</caption>
		<thead>
			<tr align="center">
				<td>姓名</td>
				<td>年龄</td>
				<td>邮箱</td>
				<td>手机</td>
				<td>操作</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input type="text" name="name"/></td>
				<td><input type="text" name="age"/></td>
				<td><input type="text" name="email"/></td>
				<td><input type="text" name="phone"/></td>
				<td align="center">
				<input type="submit" value="添加" />
				<input type="reset" value="重置" />
				</td>
			</tr>
		</tbody>
		</table>
	</form>
</div>
</body>
</html>